<template>
  <van-collapse v-model="active" class="mobile-nav">
    <van-collapse-item :title="group.groupName" :name="group.groupName" class="mobile-nav__item">
      <van-cell
        v-for="(navItem, index) in group.list"
        v-if="!navItem.disabled"
        :key="index"
        :to="'/' + base + navItem.path"
        :title="navItem.title"
        is-link
      />
    </van-collapse-item>
  </van-collapse>
</template>

<script>
export default {
  props: {
    base: String,
    group: Object
  },

  data() {
    return {
      active: []
    }
  }
}
</script>

<style lang="postcss">
.mobile-nav {
  &__item {
    margin-bottom: 20px;
  }

  &::after {
    display: none;
  }

  .van-collapse-item__content {
    padding: 0;
  }

  .van-collapse-item__title {
    font-size: 16px;
    line-height: 36px;
    align-items: center;
  }
}
</style>
